<template>
  <div class="page-wrapper">
    <!-- 导航栏 -->
    <nav class="nav-bar">
      <div class="nav-left">
        <router-link to="/" class="nav-link">首页</router-link>
        <router-link to="/contact" class="nav-link">购物车</router-link>
        <router-link to="/about" class="nav-link">我的订单</router-link>
        <router-link to="/user" class="nav-link">我的</router-link>
      </div>
      <div class="nav-right">
        <template v-if="isLoggedIn">
          <div class="user-info">
            <span>{{ userInfo.name }}</span>
            <el-button type="text" @click="handleLogout">退出登录</el-button>
          </div>
        </template>
        <router-link to="/sign" class="nav-link" v-else>注册/登录</router-link>
      </div>
    </nav>

    <!-- 卡片列表布局 -->
    <div class="goods-card-list">
      <!-- 遍历商品数据，渲染可跳转的卡片 -->
      <router-link
        class="goods-card-wrapper"
        v-for="item in tableData"
        :key="item.id"
        :to="{ name: 'detail', params: { id: item.id } }"
      >
        <div class="goods-card">
          <!-- 商品图片 -->
          <div class="card-img">
            <img :src="getImageUrl(item.pic)" alt="商品图片" />
          </div>
          <!-- 商品信息 -->
          <div class="card-info">
            <p class="name">{{ item.name }}</p>
            <p class="price">¥{{ item.price }}</p>
            <p class="id">商品ID：{{ item.id }}</p>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  name: 'HomeView',
  data() {
    return {
      tableData: [],
      isLoggedIn: false,
      userInfo: {}
    };
  },
  mounted() {
    this.checkLoginStatus();
    this.getGoodsList();
  },
  methods: {
    async getGoodsList() {
      try {
        const response = await axios.get('http://127.0.0.1:8080/goods');
        if (response.data) {
          this.tableData = response.data.map(item => ({
            id: item.id,
            name: item.name,
            price: item.price,
            pic: item.pic
          }));
        } else {
          ElMessage.error('获取商品列表失败');
        }
      } catch (error) {
        console.error('获取商品列表错误:', error);
        ElMessage.error('获取商品列表失败');
      }
    },
    // 生成完整图片URL
    getImageUrl(picName) {
      return `http://localhost:8080/images/${picName}`;
    },
    // 检查登录状态
    checkLoginStatus() {
      try {
        const storedUser = localStorage.getItem('userInfo');
        if (storedUser) {
          this.userInfo = JSON.parse(storedUser);
          this.isLoggedIn = true;
        }
      } catch (error) {
        console.error('解析用户信息失败:', error);
        localStorage.removeItem('userInfo');
        localStorage.removeItem('userId');
      }
    },
    // 安全退出登录方法（重点优化）
    handleLogout() {
      try {
        // 清除本地存储
        localStorage.removeItem('userInfo');
        localStorage.removeItem('userId');
        
        // 重置状态
        this.isLoggedIn = false;
        this.userInfo = {};
        
        // 显示成功消息
        ElMessage.success('已退出登录');
        
        // 跳转到首页（增加错误捕获）
        this.$router.push('/').catch(err => {
          console.warn('路由跳转失败:', err);
        });
      } catch (error) {
        console.error('退出登录过程出错:', error);
        // 确保状态正确
        this.isLoggedIn = false;
        this.userInfo = {};
        ElMessage.success('已退出登录');
      }
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.page-wrapper {
  padding: 20px;
}

/* 导航栏核心修改：flex 布局拆分左右 */
.nav-bar {
  display: flex;
  justify-content: space-between; /* 左右两侧分散对齐 */
  align-items: center;            /* 垂直居中 */
  gap: 20px;
  margin-bottom: 20px;
}

/* 左侧导航容器：仅负责包裹，不改变原有样式 */
.nav-left {
  display: flex;
  gap: 20px;
}

/* 右侧导航容器：仅负责包裹，不改变原有样式 */
.nav-right {
  display: flex;
}

/* 导航链接样式完全保留原有（颜色、下划线、激活态等） */
.nav-link {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}
.nav-link.router-link-exact-active {
  color: #6b46c1;
  border-bottom-color: #6b46c1;
}

/* 商品卡片列表布局 */
.goods-card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 20px; 
}

/* 卡片容器（包裹 router-link） */
.goods-card-wrapper {
  text-decoration: none; 
  color: inherit; /* 继承父元素文字颜色，避免链接默认的蓝色 */
}

/* 单个商品卡片样式 */
.goods-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s;
  text-decoration: none; /* 移除默认下划线 */
  color: inherit; /* 继承文本颜色 */
}
.goods-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 卡片图片容器 */
.card-img {
  width: 100%;
  height: 200px; 
  margin-bottom: 12px;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 4px;
}

/* 卡片信息样式 */
.card-info {
  line-height: 1.6;
}
.name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.price {
  color: #ff4d4f; 
  font-size: 14px;
  margin-bottom: 4px;
}
.id {
  font-size: 12px;
  color: #999;
}
</style>